<template>
  <div class="teacher-course-page">
    <el-card class="course-card">
      <template #header>
        <div class="card-header">
          <span>我的课程</span>
        </div>
      </template>
      
      <div v-loading="loading">
        <el-row :gutter="20">
          <el-col 
            v-for="course in courses" 
            :key="course.id" 
            :span="6" 
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6"
            class="course-item"
          >
            <el-card shadow="hover" class="course-card-item">
              <div class="course-image">
                <img 
                  v-if="course.picture" 
                  :src="'http://127.0.0.1:8000/uploads/' + course.picture" 
                  :alt="course.name"
                >
                <div v-else class="no-image">
                  <el-icon><Document /></el-icon>
                </div>
              </div>
              <div class="course-info">
                <h3 class="course-title">{{ course.name }}</h3>
                <p class="course-content">{{ course.content }}</p>
                <div class="course-status">
                  <el-tag :type="course.status === 'active' ? 'success' : 'info'">
                    {{ course.status === 'active' ? '进行中' : '已结束' }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <div v-if="courses.length === 0 && !loading" class="no-courses">
          <el-empty description="暂无课程" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Document } from '@element-plus/icons-vue';
import http from '@/util/request'; // 需要根据实际路径调整

export default {
  name: 'TeacherCourses',
  components: {
    Document
  },
  setup() {
    const courses = ref([]);
    const loading = ref(false);
    const userInfo = JSON.parse(localStorage.getItem('userinfo') || '{}');
    
    // 获取教师的课程
    const fetchCourses = async () => {
      try {
        loading.value = true;
        
        // 首先获取用户ID
        const userResponse = await http.get(`/api/get_user_id/${userInfo.username}`);
        if (userResponse.data && userResponse.data.length > 0) {
          const userId = userResponse.data[0].id;
          
          // 获取教师的课程
          const response = await http.get(`/api/tea_course/${userId}`);
          courses.value = response.data;
        }
      } catch (error) {
        console.error('获取课程失败:', error);
        ElMessage.error('获取课程失败');
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      fetchCourses();
    });

    return {
      courses,
      loading
    };
  }
};
</script>

<style scoped>
.teacher-course-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.course-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-item {
  margin-bottom: 20px;
}

.course-card-item {
  height: 100%;
  transition: transform 0.3s ease;
}

.course-card-item:hover {
  transform: translateY(-5px);
}

.course-image {
  height: 150px;
  overflow: hidden;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  font-size: 48px;
  color: #c0c4cc;
}

.course-info {
  padding: 15px 0 0;
}

.course-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-content {
  font-size: 14px;
  color: #606266;
  margin: 0 0 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
}

.course-status {
  text-align: right;
}

.no-courses {
  padding: 40px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .teacher-course-page {
    padding: 10px;
  }
  
  .el-col {
    margin-bottom: 15px;
  }
}
</style>
